<template>
  <div class="content">
    <div class="head">
      <p>预计收入</p>
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="时间">
          <el-date-picker
            v-model="form.time"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            @change="timeChange"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            :type="statusColor == 1 ? 'primary' : ''"
            @click="handleToday"
            >今日</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            :type="statusColor == 2 ? 'primary' : ''"
            @click="handleYesterday"
            >昨日</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            :type="statusColor == 3 ? 'primary' : ''"
            @click="handleWeek"
            >近7天</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            :type="statusColor == 4 ? 'primary' : ''"
            @click="handleMonth"
            >近30天</el-button
          >
        </el-form-item>
      </el-form>
      <div class="fenlei" :model="incomeData">
        <!-- <div v-for="(item, index) in count" :key="index">
                    <span>{{ item.title }}</span>          
          <span>{{ item.money }}</span>        
        </div> -->
        <div>
          <p>销售总额</p>
          <span>{{ incomeData.order_amount }}</span>
        </div>
        <div>
          <p>订单数</p>
          <span>{{ incomeData.count }}</span>
        </div>
        <div>
          <p>订单平均单价</p>
          <span>{{ incomeData.order_amount_avg }}</span>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>收入明细</p>
      <el-card class="box-card">
        <div>
          <el-table
            v-loading="loading"
            ref="multipleTable"
            :data="tableData"
            border
            style="width: 100%"
            class="oversc"
          >
            <el-table-column
              label="序号"
              type="index"
              :index="Method"
              prop="id"
              width="55"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="ctime" align="center" label="交易时间">
            </el-table-column>
            <el-table-column prop="payment_code" align="center" label="类型">
            </el-table-column>
            <el-table-column
              prop="sender_amount"
              align="center"
              label="交易金额"
            >
            </el-table-column>
            <el-table-column align="center" label="账单类型">
              <template>
                <span>收入</span>
              </template>
            </el-table-column>
            <el-table-column prop="order_id" align="center" label="订单编号">
            </el-table-column>
          </el-table>
          <div class="pageUser">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 150, 200, 300]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
// import {
//   packageCount,
//   packageIndex,
//   classification,
// } from "../../../../utils/api.js";
import { flowList, getHardwareTransactionFlow } from "../../../../utils/main";
export default {
  data() {
    return {
      token: sessionStorage.getItem("token"),
      //请求特效
      loading: false,
      form: {
        name: "",
        mobile: "",
        time: "",
      },
      statusColor: "",
      incomeData: {
        xiaoshou: "",
        order: "",
        average: "",
      },
      time: "",
      //发送请求时间参数
      //展示数据
      tableData: [],
      //明细
      // packGit: [
      //   {
      //     water_nameL: "",
      //     goods_cat_name: "",
      //     package_nember: "",
      //     goods_name: "",
      //     brand_name: "",
      //     water_img: "",
      //     ctime: "",
      //     payed: "",
      //   },
      // ],
      //水票类型
      // Data: [
      //   {
      //     id: "",
      //     name: "",
      //   },
      // ],
      page: 1,
      limit: 10,
      total: 0,
      today: "",
      yestoday: "",
      week: "",
      month: "",
      order_type: 53,
      // page1: 1,
      // limit1: 10,
      // total1: 0,
    };
  },
  methods: {
    //日期
    timeChange(e) {
      this.time = this.form.time;
      console.log(this.time);
      this.statusColor = "";
      if (this.time == null) {
        this.time = "";
      }
      this.page = 1;
      this.getList();
      // console.log(e);
      // let list = [];
      // e.forEach((item) => {
      //   let date = new Date(item);
      //   let year = date.getFullYear();
      //   let month = date.getMonth() + 1;
      //   let day = date.getDate();
      //   let h = date.getHours();
      //   let min = date.getMinutes();
      //   let s = date.getSeconds();
      //   month = month < 10 ? "0" + month : month;
      //   day = day < 10 ? "0" + day : day;
      //   h = h < 10 ? "0" + h : h;
      //   min = min < 10 ? "0" + min : min;
      //   s = s < 10 ? "0" + s : s;
      //   list.push(
      //     year + "-" + month + "-" + day + " " + h + ":" + min + ":" + s
      //   );
      // });

      // this.time = list[0] + "," + list[1];
      // console.log(this.time);
    },
    // 今日
    handleToday() {
      this.time = "";
      this.form.time = "";
      this.today = "1";
      this.yestoday = "";
      this.week = "";
      this.month = "";
      this.statusColor = 1;
      this.page = 1;
      this.getList();
    },
    // 昨日
    handleYesterday() {
      this.time = "";
      this.form.time = "";
      this.today = "";
      this.yestoday = "1";
      this.week = "";
      this.month = "";
      this.statusColor = 2;
      this.page = 1;
      this.getList();
    },
    // 近七天
    handleWeek() {
      this.time = "";
      this.form.time = "";
      this.today = "";
      this.yestoday = "";
      this.week = "1";
      this.month = "";
      this.statusColor = 3;
      this.page = 1;
      this.getList();
    },
    // 近三十天
    handleMonth() {
      this.time = "";
      this.form.time = "";
      this.today = "";
      this.yestoday = "";
      this.week = "";
      this.month = "1";
      this.statusColor = 4;
      this.page = 1;
      this.getList();
    },
    //查询
    onSubmit() {
      this.time = this.form.time;
      this.getList();
    },
    //水票分类
    selectChange() {},
    //分页器
    handleSizeChange(val) {
      this.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    // handleSizeChange1(val) {
    //   this.limit1 = val;
    //   this.packageIndexs();
    // },
    // handleCurrentChange1(val) {
    //   this.page1 = val;
    //   this.packageIndexs();
    // },
    // 序号排序
    Method(index) {
      if (this.token < this.limit) {
        return this.total - index;
      } else {
        return this.total - (this.page - 1) * this.limit - index;
      }
    },
    // 交易流水
    async getList() {
      this.loading = true;
      let res = await getHardwareTransactionFlow(
        this.token,
        this.today,
        this.yestoday,
        this.week,
        this.month,
        this.time,
        this.order_type,
        this.page,
        this.limit
        // this.time ? this.time : "",
        // this.time ? "" : this.time_status
      );
      if (res.data.status) {
        this.tableData = res.data.data.list || [];
        this.incomeData = res.data.data.data;
        console.log(this.incomeData);
        // this.xiaoshou = res.data.data.order_amount;
        // this.order = res.data.data.count;
        // this.average = res.data.data.order_amount_avg;
        // console.log(this.tableData,'[]');
        this.total = res.data.data.data.count;
        // this.tableData.list.forEach((item) => {
        //   if (item.payment_code == "balancepay") {
        //     item.payment_code_text = "余额支付";
        //   } else if (item.payment_code == "wechatpay") {
        //     item.payment_code_text = "微信支付";
        //   }
        // });
        // console.log(this.tableData.list, "55555");
        this.goods = this.tableData.goods;
        this.wa = this.tableData.wa;
        this.kt = this.tableData.kt;
        this.zong = this.goods + this.wa + this.kt;
        let timer = setTimeout(() => {
          this.loading = false;
          clearTimeout(timer);
        }, 400);
      } else {
        if (res.data.msg == "token失效,请重新进行登录") {
          this.$router.push("/materilsLogin");
        }
        if (res.data.msg == "此账号没有权限") {
          this.$message.error(res.data.msg);
          this.loading = false;
        }
        let timer = setTimeout(() => {
          this.$message.error(res.data.msg);
        }, 5000);
      }
    },
    //获取列表数据
    // packageCounts() {
    //   this.loading = true;
    //   packageCount(
    //     this.token,
    //     this.page,
    //     this.limit,
    //     this.form.mobile,
    //     this.time,
    //     this.form.name
    //   )
    //     .then((res) => {
    //       if (res.data.status) {
    //         this.tableData = res.data.data.data;
    //         this.total = res.data.data.count;
    //         this.tableData.forEach((item) => {
    //           if (item.water_img) {
    //             item.water_img1 = item.water_img;
    //             item.water_img = "https://bjsf.bjsky.top" + item.water_img;
    //           }
    //         });
    //         let timer = setTimeout(() => {
    //           this.loading = false;
    //           clearTimeout(timer);
    //         }, 400);
    //       } else {
    //         if (res.data.msg == "token失效,请重新进行登录") {
    //           this.$router.push("/materilsLogin");
    //         }
    //         if (res.data.msg == "此账号没有权限") {
    //           this.$message.error(res.data.msg);
    //           this.loading = false;
    //         }
    //         let timer = setTimeout(() => {
    //           this.$message.error(res.data.msg);
    //         }, 5000);
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err.message);
    //     });
    // },
    //明细列表数据
    // packageIndexs() {
    //   this.loading = true;
    //   packageIndex(this.token, this.page1, this.limit1, this.tableData.id, "")
    //     .then((res) => {
    //       if (res.data.status) {
    //         this.packGit = res.data.data.date;
    //         this.total1 = res.data.data.count;
    //         console.log(this.total1);
    //         this.packGit.forEach((item) => {
    //           if (item.water_img) {
    //             item.water_img1 = item.water_img;
    //             item.water_img = "https://bjsf.bjsky.top" + item.water_img;
    //           }
    //         });
    //         let timer = setTimeout(() => {
    //           this.loading = false;
    //           clearTimeout(timer);
    //         }, 400);
    //       } else {
    //         if (res.data.msg == "token失效,请重新进行登录") {
    //           this.$router.push("/materilsLogin");
    //         }
    //         if (res.data.msg == "此账号没有权限") {
    //           this.$message.error(res.data.msg);
    //           this.loading = false;
    //         }
    //         let timer = setTimeout(() => {
    //           this.$message.error(res.data.msg);
    //         }, 5000);
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err.message);
    //     });
    // },
    //水票分类
    // sdhadj() {
    //   this.loading = true;
    //   classification(this.token)
    //     .then((res) => {
    //       if (res.data.status) {
    //         this.Data = res.data.data.data;

    //         let timer = setTimeout(() => {
    //           this.loading = false;
    //           clearTimeout(timer);
    //         }, 400);
    //       } else {
    //         if (res.data.msg == "token失效,请重新进行登录") {
    //           this.$router.push("/materilsLogin");
    //         }
    //         if (res.data.msg == "此账号没有权限") {
    //           this.$message.error(res.data.msg);
    //           this.loading = false;
    //         }
    //         let timer = setTimeout(() => {
    //           this.$message.error(res.data.msg);
    //         }, 5000);
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err.message);
    //     });
    // },
  },
  mounted() {
    // this.packageCounts();
    // this.sdhadj();
    this.getList();
  },
};
</script>

<style scoped>
.content {
  font-size: 18px;
}
.head {
  margin-bottom: 20px;
  border-bottom: 1px solid #a8a7a7;
  padding-bottom: 30px;
}
.head p {
  font-size: 20px;
  margin-bottom: 10px;
}
.fenlei {
  display: flex;
  justify-content: space-around;
  height: 130px;
}
.fenlei div {
  width: 23%;
  height: 130px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  border: 1px solid rgba(102, 102, 102, 0.25);
  border-radius: 8px;
}
.fenlei div p {
  font-size: 18px;
}
.fenlei div span {
  font-size: 32px;
  color: rgba(249, 100, 34, 1);
}
.footer p {
  font-size: 20px;
  margin-bottom: 10px;
}
/* .box-card {
  height: 700px;
} */
.oversc {
  /* height: 620px; */
  overflow: scroll;
}
</style>
